import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import vueJsx from "@vitejs/plugin-vue-jsx";
import AutoImport from "unplugin-auto-import/vite";
import { resolve } from "path";
import { visualizer } from "rollup-plugin-visualizer"; //打包分析
import Unocss from "unocss/vite"; //css原子化
import { presetUno } from "unocss"; 
export default defineConfig({
  plugins: [
    vue(),
    vueJsx({
      include: /\.(jsx|tsx)/,
    }),
    AutoImport({
      imports: ["vue", "vue-router", "pinia"], // 自动导入vue和vue-router相关函数
      dts: "src/auto-import.d.ts", // 生成 `auto-import.d.ts` 全局声明
    }),
    visualizer({
      open: true,
    }),
    Unocss({
      presets: [
        // presetAttributify(), //美化属性 可以在标签上直接写：bg-red m="1" flex 等等
        // presetIcons(), //图标
        presetUno(), //预设 比如tailwindcss
      ],
      rules: [
        //自定义class
        [
          "bg-red",
          {
            "background-color": "red",
          },
        ],
        // [/^m-(\d+)$/, ([, d]) => ({ margin: `${Number(d) * 10}` })], //正则
      ],
      shortcuts: {
        // cike:['flex','red'] //将flex red组合到cike上
      },
    }),
  ],
  resolve: {
    // 配置路径别名
    alias: {
      "@": resolve(__dirname, "./src"),
    },
  },
  build: {
    chunkSizeWarningLimit: 2000,
    cssCodeSplit: true,
    sourcemap: false,
    minify: "terser",
    assetsInlineLimit: 4000,
  },
});
